import React, { useEffect, useState } from 'react'
import { Button, Drawer, message, Tree } from 'antd';
import treeData from '../config/authData';
import {updateRoleAuth} from "@/apis/roleApi"

export default function MyDrawer({roleMenus,roleId}) {
    const [open, setOpen] = useState(true);
    const [chooseMenu,setChooseMenu] = useState(roleMenus)
    useEffect(()=>{
        console.log(roleMenus);
        console.log(roleId);
    },[])
    const onClose = () => {
        setOpen(false);
    };
    /**
     * 
     * @param {*} checkedKeys  得到一个地址,这个地址里面数据发生变化,影响tree
     * @param {*} info 
     */
    const onCheck = (checkedKeys, info) => {
        // let newKeys = [...checkedKeys]
        // if(info.halfCheckedKeys.length){
        //     for (const item of info.halfCheckedKeys) {
        //         newKeys.push(item)
        //     }
        // }
        // console.log(newKeys)
        console.log(checkedKeys);
        setChooseMenu(checkedKeys)
    };
    const myAuth =async ()=>{
        let obj = {
            id:roleId,
            authTime:new Date(),
            authUser:"xiaowang",
            menus:chooseMenu
        }
        const res = await updateRoleAuth(obj)
        if(res.data.code){
            message.success("授权成功")
        }else{
            message.error("授权失败")
        }
    }
    return (
        <React.Fragment>
            <Drawer title="权限列表" placement="right" onClose={onClose} open={open}>
                <Tree
                    checkable
                    defaultExpandedKeys={['/home/product', '/home/chart']}
                    defaultCheckedKeys={roleMenus}
                    onCheck={onCheck}
                    treeData={treeData}
                />
                <Button onClick={myAuth}>授权</Button>
            </Drawer>
        </React.Fragment>
    )
}
